<template>
	<div class="shows clearfix">
		<!--影院名和地址-->
		<div class="showstop">
			<div class="left">
				<!--影院名-->
				<p class="nm">{{cinemaData.nm}}</p>
				<!--影院地址-->
				<p class="addr">{{cinemaData.addr}}</p>
			</div>
		</div>
		<!--轮播图-->
		<div class="lunbo">

			<swiper :options="swiperOption" class="swiper" ref="mySwiper">
				<swiper-slide v-for="(item,index) in movies"><img :src="re(item.img)" @click="choice($event)" /></swiper-slide>

			</swiper>

		</div>
		<!--显示影片简单信息-->
		<ul class="movie_Info">
			<li>
				<p><span class="nm">{{movies[index].nm}}</span>
					<!--当有评分时显示评分-->
					<span v-if="movies[index].sc>0" class="sc">{{movies[index].sc}}</span><span v-if="movies[index].sc>0" class="fen">分</span>
					<!--当没有评分时显示多少人想看-->
					<span v-if="movies[index].sc<=0" class="wish">{{movies[index].wish}}</span>
					<span v-if="movies[index].sc<=0" class="kan">人想看</span></p>
				<p>{{movies[index].desc}}</p>

			</li>
		</ul>
		<div class="vipInfo clearfix" v-for="item in vipInfo">
			<div class="vipInfo_left fl clearfix">

				<p class="car fl">折扣</p><span>{{item.title}}</span>
			</div>
			<div class="vipInfo_right fr">
				<span class="process">{{item.process}}&gt;</span>
				<span></span>
			</div>
		</div>
		<!--播放信息列表-->
		<div class="show_info">
			<!--获取播放的日期-->
			<swiper :options="swiperOptions">
			<swiper-slide  v-for="(item,i) in movies[index].shows">
				<div class="showday" @click="choice_day(i)">{{item.dateShow}}</div>
				
			</swiper-slide>
			</swiper>
			<ul v-for="item in movies[dayindex].shows">
				<li v-for="i in item.plist" class="clearfix">
					<!--左边块-->
					<div class="left fl clearfix">
						<!--获取播放时间-->
						<div class="tiem fl">
							<p class="tm">{{i.tm}}</p>
						</div>
						<div class="lang_th">
							<!--获取语言和影片类型(2D或3D)-->
							<p>{{i.lang}}<span class="tp">{{i.tp}}</span></p>
							<!--获取播放的影厅-->
							<p>{{i.th}}</p>
						</div>
					</div>
					<!--右边块-->
					<div class="right fr">
						<!--价格信息-->
						<div class="price">

							<p><span>{{i.vipPriceName}}</span><span>&yen;{{i.vipPrice}}</span></p>
							<p>{{i.extraDesc}}</p>

						</div>
						<!--购票按钮-->
						<button class="purchase_btn">
							购票
						</button>
					</div>
				</li>
			</ul>
		</div>
		<!--影院食品套餐信息-->
		<div class="dealList">
			<div class="dtitle">
				影院{{activity.title}}
			</div>
			<ul>
				<li v-for="item in dealList.dealList" class="clearfix">
					<!--dleft 左边块-->
					<div class="dleft fl clearfix">
						<img :src="re(item.imageUrl)" class="fl" />
						<p>
							<div v-if="item.recommendPersonNum<2" class="rnum">单人</div>
							<div v-if="item.recommendPersonNum==2" class="rnum">双人</div>
							<div v-if="item.recommendPersonNum>2" class="rnum">多人</div><span>{{item.title}}</span></p>
						<!--获取价格-->
						<p class="price">&yen;{{item.price}}</p>
					</div>
					<!--右边块-->
					<div class="dright fr">
						<!--获取已销售的数量-->
						<p>{{item.curNumberDesc}}</p>
						<!--购买按钮-->
						<button>去购买</button>
					</div>
				</li>
			</ul>
		</div>
	</div>

</template>
<script>
	import qs from 'qs'

	export default {
		computed: {
			swiper() {
				if(this.$refs.mySwiper) {
					return this.$refs.mySwiper.swiper
				}
			}
		},
		created() {

			this.movieId = this.$route.query.movieId;
			console.log(this.movieId)
			this.cinemaId = this.$route.query.cinemaId;
			console.log(this.cinemaId)
			this.axios.get('/ajax/cinemaDetail?cinemaId=' +
				this.cinemaId + '&movieId=' + this.movieId).then(res => {
				console.log(res)
				this.cinemaData = res.data.cinemaData;
				console.log(this.cinemaData)
				this.movies = res.data.showData.movies
				console.log(this.movies)
				this.vipInfo = res.data.showData.vipInfo;
				console.log(this.vipInfo);
				//将获取到的食品套餐信息保存
				this.dealList = res.data.dealList
				this.activity = this.dealList.activity
				this.$store.commit('changeHT', this.cinemaData.nm)
			})

		},
		mounted() {
			this.$nextTick(() => {
				this.$refs.mySwiper.swiper.slideTo(this.index, 0, false)
				this.$refs.mySwiper.$on("transitionEnd", () => {
					this.index = this.swiper.activeIndex;
					//				this.dateList
				})
			})

		},
		data() {
			return {
				//影院ID
				movieId: '',
				cinemaId: '',
				//影院基本信息
				cinemaData: [],
				//影片基本信息
				movies: [],
				vipInfo: [],
				//食品套餐信息
				dealList: [],
				activity: {},
				index: 0,
				dayindex: 0,
				swiperOption: {
					slidesPerView: 'auto',
					spaceBetween: 30,
					centeredSlides: true,

					pagination: {
						el: '.swiper-pagination',
						clickable: true

					}
				},
				swiperOptions: {
					slidesPerView: 'auto',
					spaceBetween: 10,

					pagination: {
						el: '.swiper-pagination',
						clickable: true

					}
				}
			}

		},
		methods: {
			re(img) {
				return img.replace('w.h', '128.180')
			},
			choice(index) {
				this.index = this.swiper.activeIndex;
				this.dayindex = 0;
			},
			choice_day(index) {
				this.dayindex = index;
			},
		}
	}
</script>

<style scoped="scoped">
	.shows {
		margin-top: 40px;
	}
	
	.swiper-container {
		z-index: 0;
	}
	
	.shows .showstop {
		border-bottom: 1px solid #ccc;
		border-right: 1px solid #ccc;
	}
	
	.shows .showstop .left {
		width: 50%;
	}
	
	.shows .showstop .left p {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	
	.shows .showstop .left .addr {
		color: #ccc;
		padding-bottom: 20px;
	}
	
	.shows .showstop .left .nm {
		font-size: 20px;
		padding-top: 20px;
	}
	/*给轮播图设置样式*/
	
	.lunbo {
		height: 140px;
		background: #ccc;
	}
	
	.lunbo img {
		height: 120px;
		width: 85px;
		margin-top: 10px;
	}
	
	.movie_Info p {
		text-align: center;
	}
	
	.movie_Info p:nth-of-type(1) {
		margin-top: 20px;
	}
	
	.movie_Info p:nth-of-type(1) .nm {
		font-size: 22px;
		font-weight: 400;
		margin-right: 15px;
	}
	
	.movie_Info p:nth-of-type(1) .sc,
	.movie_Info p:nth-of-type(1) .kan,
	.movie_Info p:nth-of-type(1) .fen,
	.movie_Info p:nth-of-type(1) .wish {
		color: yellow;
	}
	
	.movie_Info p:nth-of-type(1) .sc,
	.movie_Info p:nth-of-type(1) .wish {
		font-size: 18px;
	}
	
	.movie_Info p:nth-of-type(1) .kan,
	.movie_Info p:nth-of-type(1) .fen {
		font-size: 16px;
	}
	
	.movie_Info p:nth-of-type(2) {
		color: #ccc;
	}
	/*设置轮播图样式*/
	
	.swiper-slide-active img {
		border: 6px solid white;
		margin-top: 0;
	}
	
	.swiper-slide {
		width: 100px !important;
		/*display: inline-block;*/
	}
	/*设置*/
	
	.show_info {
		margin-top: 10px;
	}
	
	.show_info .left {
		position: relative;
		width: 60%;
		top: 25%;
		/*transform: translateY(-50%);*/
	}
	
	.show_info ul li {
		width: 100%;
		height: 80px;
		border-bottom: 1px solid #ccc;
	}
	
	.show_info ul {
		margin-top: 20px;
	}
	
	.show_info .showday {
		font-size: 16px;
		color: #7F6666;
		margin-right:5px;
	}
	
	.show_info .left .lang_th p {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	
	.show_info .left .lang_th,
	.show_info .left .tiem {
		/*		position: absolute;*/
		/*top: 30px;*/
	}
	
	.show_info .left .tiem {
		width: 50px;
		/*left: 10px;*/
	}
	
	.show_info .left .lang_th {
		width: 50%;
		/*left: 80px;*/
		margin-left: 70px;
	}
	
	.show_info .left .lang_th .tp {
		/*margin-left: 5px;*/
	}
	
	.show_info .left .lang_th p:nth-of-type(1) {
		/*padding-bottom: 10px;*/
		font-size: 14px;
	}
	
	.show_info .left .lang_th p:nth-of-type(2) {
		color: #999;
	}
	
	.show_info .right {
		position: relative;
		width: 40%;
		top: 50%;
		transform: translateY(-50%);
		/*overflow: hidden;*/
	}
	
	.show_info .right .price {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	
	.show_info .right .price p {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		/*width: 95%;*/
	}
	
	.show_info .right .price p:first-child {
		font-size: 10px;
		margin-bottom: 10px;
	}
	
	.show_info .right .price p:first-child span {
		box-sizing: border-box;
	}
	
	.show_info .right .price p:first-child span:first-child {
		color: white;
		background: #FF9900;
		border: 1px solid #FF9900;
	}
	
	.show_info .right .price p:first-child span:last-child {
		color: #FF9900;
		/*background: white;*/
		border: 1px solid #FF9900;
		padding-left: 3px;
		padding-right: 3px;
	}
	
	.show_info .right .price p:last-child {
		color: #999;
		font-size: 10px;
	}
	/*给购票按钮设置样式*/
	
	.show_info .right .purchase_btn {
		float: right;
		margin-right: 10px;
		width: 50px;
		height: 30px;
		background: #F03D37;
		color: white;
		border-radius: 10%;
		top: 50%;
		transform: translateY(-50%);
	}
	
	.vipInfo {
		height: 40px;
		background: #FFF5EA;
		width: 100%;
	}
	
	.vipInfo .vipInfo_left {
		width: 50%;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	
	.vipInfo .vipInfo_left p,
	.vipInfo .vipInfo_left span {
		font-size: 10px;
	}
	
	.vipInfo .vipInfo_left .car {
		display: inline-block;
		padding-left: 5px;
		padding-right: 5px;
		background: #FF941A;
		margin-right: 5px;
		color: white;
		height: 20px;
		margin-top: 10px;
	}
	
	.vipInfo .vipInfo_left span {
		color: #FF941A;
		line-height: 40px;
	}
	
	.vipInfo .vipInfo_right span {
		line-height: 40px;
		font-size: 10px;
		color: #666;
		margin-right: 10px;
	}
	
	.vipInfo .vipInfo_right {
		width: 20%;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	/*给食品信息添加样式*/
	.dealList{
		
	}
	.dealList .dtitle {
		width: 100%;
		height: 40px;
		border-bottom: 1px solid #ccc;
		line-height: 40px;
		color: #999;
		/*margin-left: 10px;*/
	}
	

	
	.dealList ul li {
		border-bottom: 1px solid #ccc;
		padding-top: 10px;
		padding-bottom: 10px;
		
	}
	
	.dealList img {
		width: 80px;
		margin-right: 10px;
	}
	
	.dealList .rnum {
		display: inline-block;
		background: #FF9900;
		font-size: 14px;
		color: white;
	}
	
	.dealList .dleft {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		width: 80%;
	}
	
	.dealList .dleft p:first-child {
		font-size: 14px;
	}
	
	.dealList .price {
		color: red;
		margin-top: 40px;
	}
	
	.dealList .dright {
		width: 20%;
		margin-top: 15px;
		position: relative;
		height: 60px;
	}
	.dealList .dright button{
		width: 50px;
		height: 30px;
		border-radius: 10%;
		background: #F03D37;
		color: white;
		position: absolute;
		bottom: 0;
		right: 10px;
	}
	.dealList .dright p{
		color: #999;
		font-size: 14px;
		
		position: absolute;
		top: 0;
		right: 10px;
	}
	/*.show_info .left .tm,.show_info .left .lang_th{
		display: inline-block;
	}*/
	.showday{
		width: 300px;
		
	}
</style>